<template>
    <div class="panel">
        <div class="tools" style="display: none">
            <img src="../../assets/images/left.png" class='left' alt="">
            <img src="../../assets/images/left_down.png" class='left-down' alt="">
            <img src="../../assets/images/right.png" class='right' alt="">
            <img src="../../assets/images/right_down.png" class='right-down' alt="">
            <div class="warp">
                <div v-for="item in list" style="line-height: 60px">
                    <sapn style="float: left;margin-right: 5px">{{item.text}}:</sapn>
                    <sapn style="float: left;margin-right: 10px">{{item.value}}</sapn>
                </div>
                <div class="btn-warp">
                    <div class="search-btn" @click="search">查询
                        <img src="../../assets/images/left.png" class='left' style="width: 8px;" alt="">
                        <img src="../../assets/images/left_down.png" class='left-down' style="width: 8px;" alt="">
                        <img src="../../assets/images/right.png" class='right' style="width: 8px;" alt="">
                        <img src="../../assets/images/right_down.png" class='right-down' style="width: 8px;" alt="">
                    </div>
                    <div class="search-btn">清除</div>
                </div>
            </div>
        </div>
        <el-row>
            <el-col :span="18">
                <div class="maps" style="padding: 5px 0">
                    <v-map style="height: 100%" v-if="!provinceshow"></v-map>
                    <province style="height: 100%" :pinyinName="pinyinName" v-if="provinceshow"></province>
                    <div class='left'>
                        <img src="../../assets/images/left.png" alt="">
                    </div>
                    <div class='left-down'>
                        <img src="../../assets/images/left_down.png" alt="">
                    </div>
                    <div class='right'>
                        <img src="../../assets/images/right.png" alt="">
                    </div>
                    <div class='right-down'>
                        <img src="../../assets/images/right_down.png" alt="">
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <summery></summery>
            </el-col>
        </el-row>
        <c-alert style="margin-top: 15px"></c-alert>
    </div>
</template>
<script type="text/javascript">
    import province from './province.vue'
    import maps from './map.vue'
    import summery from './summery.vue'
    import cAlert from './alert.vue'
    import expressinfo from './expressinfo.vue'
    import bus from '@/eventBus/bus'

    export default {
        data() {
            return {
                list: [],
                provinceshow: false,
                pinyinName: '',
                options1: [{
                    value: '河北',
                    label: '河北'
                }],
                options2: [{
                    value: '廊坊',
                    label: '廊坊'
                }],
                value: ''
            }
        },
        mounted() {
            let _this = this
            bus.$on('search', function (e) {
                _this.list = []
                _this.$nextTick(() => {
                    e.forEach((item) => {
                        if (item.value) {
                            _this.list.push(item)
                        }
                    })
                })
            })
            bus.$on('provinces', function (e) {
                if (e) {
                    _this.pinyinName = e
                    _this.provinceshow = true

                } else {
                    _this.provinceshow = false

                }
            })
        },
        methods: {
            search() {
                let obj = {
                    status: true,
                    type: 'searchMg'
                }
                bus.$emit('dialogshow', obj)
            }
        },
        components: {
            vMap: maps,
            summery: summery,
            cAlert,
            expressinfo,
            province
        }
    }
</script>
